<template>
  <div :class="['record', 'pad']">
    <nav-bar />
    <van-sticky :offset-top="46">
      <div class="search">
        <van-search
          v-model="condition.studentName"
          show-action
          background="#89d3f8"
          placeholder="请输入学生姓名"
          @search="onSearch"
          @clear="onClear"
        >
          <template #action>
            <div @click="onSearch" style="color: #ffffff">搜索</div>
          </template>
        </van-search>
      </div>
      <div style="margin-left: 10px;margin-bottom: 10px;">
        <div v-if="showFlag">
          <span class="className"></span>
          <span class="courseName">{{ courseName }}</span>
          <span style="float: right;margin-right: 10px;font-size: 12px;">
            应到<span class="listLength">{{ totalCount }}</span> 实到<span class="signInCount">{{ signInCount }}</span>
          </span>
        </div>
      </div>
    </van-sticky>
    <div class="lists">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          :offset="10"
          v-if="list.length > 0"
        >
          <div class="listItem" v-for="(item, index) in list" :key="item.taskId">
            <span class="grade">
              {{ item.gradeClass }}
              <span v-if="item.courseName!==undefined&&item.courseName!==''" style="color: red"> （课程： {{ item.courseName }}）</span>
            </span>
            <div class="top">
              <div class="title">
                <img src="@/assets/student.svg" style="width: 0.6rem;height: 0.6rem;" />
                <span class="student">{{ item.studentName }}</span>
                <img v-if="item.sex === 0" src="@/assets/girl.svg" style="width: 0.5rem;height: 0.5rem;" />
                <img src="@/assets/boy.svg" style="width: 0.4rem;height: 0.4rem;" v-else />
              </div>
              <div v-if="item.courseScheduleId && item.courseScheduleId !== ''">
                <van-radio-group
                  style="margin-left: auto;"
                  direction="horizontal"
                  v-model="radioValue[index]"
                  v-if="doFlag"
                >
                  <van-radio name="1" icon-size="0.4rem" @click="onChange(item, index)">已到</van-radio>
                  <van-radio name="2" icon-size="0.4rem" @click="onChange(item, index)">请假</van-radio>
                </van-radio-group>
                <van-radio-group
                  style="margin-left: auto;"
                  direction="horizontal"
                  v-model="radioValue[index]"
                  disabled
                  v-else
                >
                  <van-radio name="1" icon-size="0.4rem" @click="onChange(item, index)">已到</van-radio>
                  <van-radio name="2" icon-size="0.4rem" @click="onChange(item, index)">请假</van-radio>
                </van-radio-group>
              </div>
              <div v-if="item.courseScheduleId && item.courseScheduleId !== ''">
                <van-button
                  style="border-radius: 0.2rem;"
                  type="info"
                  color="#89d3f8"
                  size="small"
                  @click="clearStatus(item, index)"
                  v-if="doFlag"
                  >重新签到
                </van-button>
                <van-button
                  v-else
                  style="border-radius: 0.2rem;"
                  type="info"
                  color="#89d3f8"
                  size="small"
                  @click="clearStatus(item, index)"
                  disabled
                  >重新签到
                </van-button>
              </div>
            </div>
          </div>
        </van-list>
        <van-empty description="暂无数据" v-else />
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { signCourseStudent, changeSignInStatus, signInCourseStudentCount } from '@/api/signIn.js'
import NavBar from '@/components/NavBar'
export default {
  components: {
    NavBar
  },
  provide: {
    info: {
      title: '课表',
      leftText: '返回',
      rightText: '',
      leftArrow: true
    }
  },
  data() {
    return {
      signInCount: 0,
      courseName: '',
      showFlag: true,
      classId: 0,
      radioValue: [],
      lists: [],
      list: [],
      list_new: [],
      loading: false,
      finished: false,
      isLoading: false,
      badge1: '',
      badge2: '',
      doFlag: true,
      condition: {
        currPage: 1, // 请求第几页
        pageSize: 10, // 每页请求的数量
        schoolId: 0, // 学校id
        studentName: '' // 学生姓名
      },
      totalCount: 0 // 总共的数据条数
    }
  },
  created() {
    document.title = '爱学坊教师点名系统'
    // this.debouncednewFormName = Debounce(this.onRefresh, 800)
    this.condition.schoolId = this.$route.query.schoolId
    this.classId = this.$route.query.classId
    this.courseName = this.$route.query.courseName
    const nowTime = new Date()
    if (nowTime.getHours() >= 17) {
      this.doFlag = false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async onClear(item) {
      this.condition.studentName = ''
    },
    async clearStatus(item, index) {
      const nowTime = new Date()
      if (nowTime.getHours() >= 17) {
        return
      }
      await changeSignInStatus(item.courseScheduleId, 0)
      // 查询实到人数
      const resCount = await signInCourseStudentCount(this.classId)
      this.signInCount = resCount.data
      this.$set(this.radioValue, index, String(0))
    },
    async onChange(item, index) {
      const nowTime = new Date()
      if (nowTime.getHours() >= 17) {
        return
      }
      await changeSignInStatus(item.courseScheduleId, this.radioValue[index])
      // 查询实到人数
      const resCount = await signInCourseStudentCount(this.classId)
      this.signInCount = resCount.data
      this.list.forEach((v, innerIndex) => {
        if (item.courseScheduleId === v.courseScheduleId) {
          this.list[index].signInStatus = this.radioValue[index]
        }
      })
    },
    // 搜索
    async onSearch(val) {
      if (val === undefined || val === '') {
        return
      }
      if (this.condition.studentName !== undefined && this.condition.studentName !== '') {
        this.showFlag = false
      } else {
        this.showFlag = true
      }
      this.condition.currPage = 1
      const res = await signCourseStudent(this.classId, this.condition)
      this.list_new = res.data.data
      this.list = []
      this.totalCount = res.data.totalCount
      this.list_new.forEach(v => {
        this.list.push(v)
      })
      // 加载状态结束
      this.loading = false
      // 数据全部加载完成
      if (this.list.length >= this.totalCount) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    // 下拉刷新
    async onRefresh() {
      this.condition.currPage = 1
      this.finished = false
      await this.getList()
    },
    async onLoad() {
      console.log('onload==============')
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.condition.currPage++
      const res = await signCourseStudent(this.classId, this.condition)
      this.list_new = res.data.data
      this.totalCount = res.data.totalCount
      this.list_new.forEach((v, index) => {
        this.list.push(v)
      })
      this.list.forEach((v, index) => {
        this.$set(this.radioValue, index, String(v.signInStatus))
      })
      // 加载状态结束
      this.loading = false
      // 数据全部加载完成
      if (this.list.length >= this.totalCount) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    // 列表请求会在多处使用，所以放在了一个方法里
    async getList() {
      // 查询实到人数
      this.list = []
      const resCount = await signInCourseStudentCount(this.classId)
      this.signInCount = resCount.data
      const res = await signCourseStudent(this.classId, this.condition)
      this.list = res.data.data
      this.totalCount = res.data.totalCount
      this.list.forEach((item, index) => {
        this.$set(this.radioValue, index, String(item.signInStatus))
      })
      // 加载状态结束
      this.isLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.className {
  font-weight: bold;
  font-size: 16px;
}
.listLength {
  margin: 3px 3px;
  font-weight: bold;
  font-size: 16px;
  color: #2fc25b;
}
.signInCount {
  margin: 3px 3px;
  font-weight: bold;
  font-size: 16px;
  color: #2fc25b;
}
.courseName {
  font-weight: bold;
  font-size: 14px;
  color: #76797e;
  margin-left: 10px;
}
.student {
  font-size: 15px;
  margin-left: 10px;
  margin-right: 10px;
}
.grade {
  font-weight: normal;
  font-size: 12px;
  color: #76797e;
}

.pad {
  padding-top: 46px;
}
.record {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #f5fafe;
  .van-search {
    margin: 10px;
    border-radius: 5px;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .lists {
    ::v-deep .van-pull-refresh {
      overflow-y: auto;
      height: 75vh;
    }
    .listItem {
      display: flex;
      flex-direction: column;
      padding: 16px;
      box-sizing: border-box;
      background: #fff;
      margin: 10px;
      border-radius: 5px;
      .top {
        display: flex;
        justify-content: space-between;
        .title {
          font-size: 16px;
          font-weight: bold;
          color: #191f25;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: flex;
          align-items: center;
        }
        .mark {
          font-size: 13px;
          color: #2fc25b;
        }
      }
      .btm {
        margin-top: 6px;
        text-align: left;
        color: #646566;
        font-size: 13px;
      }
      .remark {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
